import React from 'react'
import classNames from 'classnames'
import PropTypes from 'prop-types';

import './Button.scss'

class Button extends React.Component{
    // 静态属性
    static defaultProps = {
        children:'Button'
    }
    static propTypes = {

    }
    
    state = {
        type:'button'
    }
    render(){
        console.log('props',this.props)
        const {children,className,render,onClick} = this.props

        // this.props.b(100)
        return (
            <button className={classNames('btn',className)} onClick={onClick}>{
                typeof children === 'function' ?
                children(100)
                :
                (children ? children : render(this.state.type))
            }</button>
        )
    }
}

// props类型检查（设置propTypes静态属性、类属性）
Button.propTypes = {
    onClick:PropTypes.func,
    // index:PropTypes.number,
    index: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.string,
    ]),

    // 定义属性校验器
    age:function(props, propName, comName){
        if (props[propName] < 18 || props[propName]>30) {
            return new Error(propName + "必须在18岁到30岁之间");
        }
    }
}

// props默认值
// Button.defaultProps = {
//     children:'Button'
// }
export default Button;